<!--
 * @Author: windys
 * @Description: 模拟比赛
 * @Date: 2022-03-23 13:11:57
-->
<template>
  <div class="page">
    <div
      v-for="item in list"
      :key="item.gameId"
      class="item"
      @click="handleClick(item)"
    >
      <div class="cover">
        <span
          :style="{ background: item.gameStatus == 1 ? '#2fb90c' : 'red' }"
          >{{ filterGameStatus(item.gameStatus) }}</span
        >
        <van-image
          :src="item.posterUrls"
          width="100%"
          height="100%"
          fit="fill"
          radius="5px"
        />
      </div>
      <div class="detail">
        <div class="name">{{ item.name }}</div>
        <span>查看详情</span>
      </div>
      <div class="footer">
        <div>
          <div class="title">比赛时间</div>
          <div>{{ item.startTime }}~{{ item.endTime }}</div>
        </div>
        <div>
          <div class="title">报名人数</div>
          <div>{{ item.userCount }}人</div>
        </div>
        <div>
          <div class="title">初始资金</div>
          <div>{{ item.initialCapital }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref } from "vue";
import { ApiGetGameList } from "../../api/common";
import filter from "@/utils/filter.js";
import { useRouter } from "vue-router";
import { isTemplateNode } from "@vue/compiler-core";
export default defineComponent({
  setup() {
    const { filterGameStatus } = filter();
    const list = ref([]);
    const router = useRouter();
    onMounted(() => {
      init();
    });
    const init = async () => {
      const res = await ApiGetGameList({
        pageIndex: 1,
        pageSize: 100,
      });
      if (res && res.length) {
        list.value = res;
      }
    };

    const handleClick = (item) => {
      router.push({
        path: "/gameDetail",
        query: {
          id: item.gameId,
        },
      });
    };
    return {
      list,
      filterGameStatus,
      handleClick,
    };
  },
});
</script>


<style scoped lang='scss'>
.item {
  height: 220px;
  overflow: hidden;
  margin: 5px 10px;
  border-bottom: 1px solid #f3eded;
  margin-bottom: 25px;
  .cover {
    height: 130px;
    border-radius: 5px;
    position: relative;
    span {
      position: absolute;
      left: 5px;
      top: 5px;
      background: #2fb90c;
      color: #fff;
      z-index: 100;
      font-size: 8px;
      padding: 2px;
      border-radius: 2px;
    }
  }
  .detail {
    display: flex;
    padding: 5px 2px;
    position: relative;
    align-items: center;
    margin-top: 5px;
    .name {
      font-size: 14px;
      font-weight: bold;
    }
    span {
      padding: 5px 8px;
      border-radius: 20px;
      color: #fff;
      background: #dba905;
      position: absolute;
      right: 10px;
      font-size: 12px;
    }
  }
  .footer {
    display: flex;
    margin-top: 15px;
    div {
      width: 100%;
      text-align: center;
      .title {
        margin-bottom: 5px;
        font-size: 12px;
        color: #a7a4a4;
      }
    }
  }
}
</style>